// 左侧选项卡
let aSidenavLi = document.querySelectorAll('.side-nav ul li')
let aContentlayer = document.querySelectorAll('.content-layer')

aSidenavLi.forEach(function(ele, index) {
    ele.onclick = function() {
        for (let i = 0; i < aSidenavLi.length; i++) {
            aSidenavLi[i].className = ''
            aContentlayer[i].className = 'content-layer'
        }
        ele.className = 'cur'
        aContentlayer[index].className = 'content-layer showon'
    }
})


// 我的关注选项卡
let aTakelooktab = document.querySelectorAll('.take-look-tab ul li')
let aHousingCollection = document.querySelectorAll('.housing-collection')

aTakelooktab.forEach(function(ele, index) {
    ele.onclick = function() {
        for (let i = 0; i < aTakelooktab.length; i++) {
            aTakelooktab[i].className = ''
            aHousingCollection[i].className = 'housing-collection'
        }
        ele.className = 'cur'
        aHousingCollection[index].className = 'housing-collection showon'

    }
})

// 浏览记录选项卡
let ahistorytab = document.querySelectorAll('.Browsing-history ul li')
let ahistoryCollection = document.querySelectorAll('.history-collection')

ahistorytab.forEach(function(ele, index) {
    ele.onclick = function() {
        for (let i = 0; i < ahistorytab.length; i++) {
            ahistorytab[i].className = ''
            ahistoryCollection[i].className = 'history-collection'
        }
        ele.className = 'cur'
        ahistoryCollection[index].className = 'history-collection showon'

    }
})

// 编辑资料选项卡
let aEditingtab = document.querySelectorAll('.Editing-materials ul li')
let aEditingCollection = document.querySelectorAll('.Editing-collection')

aEditingtab.forEach(function(ele, index) {
    ele.onclick = function() {
        for (let i = 0; i < aEditingtab.length; i++) {
            aEditingtab[i].className = ''
            aEditingCollection[i].className = 'Editing-collection'
        }
        ele.className = 'cur'
        aEditingCollection[index].className = 'Editing-collection showon'

    }
})

// 二手房，新房，租房 渲染
let oSecondhands = document.querySelector('#secondHands')
let oLease = document.querySelector('#lease')
let oNew = document.querySelector('#new')

var arr = []
    // 导航
let oUl = document.querySelector(".take-look-tab ul li.cur")


let Attention1 = document.querySelector('#ershou')
let Attention2 = document.querySelector('#zufang')
let Attention3 = document.querySelector('#xinfang')


// 二手房
// 清空以前的数据
oSecondhands.innerHTML = ''
let gainArr = []
let gainArr2 = []
let gainArr3 = []
ajax({
    url: '../../php/getList.php',
    success(res) {
        arr = JSON.parse(res)
            // 判断有没有数据
        $.get('../../php/getuser.php?username=111', function(data, status) {
            focus_str = JSON.parse(data).Focus_secondHands
            secondHandsArr = JSON.parse(data).Focus_secondHands.split(' ')
            leaseHouseArr = JSON.parse(data).Focus_lease.split(' ')
            newHouseArr = JSON.parse(data).Focusonhousing.split(' ')
            console.log(secondHandsArr, 'newarr');

            // oDelete.onclick = function() {
            //         oSecondhands.remove()
            //         onoAttention.style.display = 'block'
            //         getDate(gainArr)
            //         secondHandsArr = []
            //         focus_str = secondHandsArr.join(' ')
            //         $.post('../../php/focuson2.php', {
            //             username: '111',
            //             Focus_secondHands: focus_str
            //         }, function(data, status) {
            //             console.log(data, status);
            //         })

            //     }

            gainArr = arr.filter(function(item) {
                return secondHandsArr.some(function(el) {
                    return el == item.id
                })
            })
            gainArr2 = arr.filter(function(item) {
                return leaseHouseArr.some(function(el) {
                    return el == item.id
                })
            })
            gainArr3 = arr.filter(function(item) {
                return newHouseArr.some(function(el) {
                    return el == item.id
                })
            })
            getDate(gainArr, oSecondhands, Attention1)
            getDate(gainArr2, oLease, Attention2)
            getDate(gainArr3, oNew, Attention3)
        })


    }

})

function getDate(arr, box, attention) {
    // 清空以前的数据
    box.innerHTML = ''
    if (!arr[0]) {
        attention.style.display = 'block'
        return
    }
    arr.forEach(ele => {
        let str = `<li class="hs-clt-group" goodsId=${ele.id}>
        <p class="group-top clearfix">
            <span class="tips fl">${ele.type}<i class="icon-user"></i></span>
            <span class="date fl">2021-02-01 14:03:59</span>
        </p>
        <div class="clearfix">
            <p class="photo fl">
                <a target="_blank" href="javascript:;">
                    <img src="${ele.img}">
                </a>
            </p>
            <div class="show-detail">
                <p class="house-title"><a target="_blank" href="javascript:;">${ele.name}</a></p>
                <p class="house-about clearfix">
                    <span>${ele.houseType}</span>
                    <span class="flag-line"></span>
                    <span>${ele.area}平米</span>
                    <span class="flag-line"></span>
                    <span>${ele.renovation}</span>
                    <span class="flag-line"></span>
                    <span>${ele.floor}层</span>
                    <span class="flag-line"></span>
                    <span>2010年建</span>
                </p>
                <p class="house-address clearfix"><span class="address">${ele.location}</span><span>[${ele.LocationArea}]</span><span>中心路(深圳湾段)2233号</span></p>
                <p class="house-traffic clearfix">
                    <span>深圳湾学校（小学部）</span>
                    <span>深圳湾学校（初中部）</span>
                    <span>距离2号线(蛇口线)海月约261米</span>
                    <span>电梯</span>
                </p>
            </div>
        </div>
        <div class="show-price show-price-sale">
            <p class="t-price"><span>2,850</span>万</p>
            <p class="v-price">182178元/平米</p>
        </div>
        <p class="unfavorite">取消关注</p>
    </li>`
        box.innerHTML += str


    })
}

// 二手房事件委托
oSecondhands.addEventListener('click', function(ev) {

    // 删除
    if (ev.target.className === 'unfavorite') {
        // 取id
        console.log(ev.target.className);
        let id = ev.target.parentNode.getAttribute('goodsId')

        secondHandsArr.splice($.inArray(id, secondHandsArr), 1);
        focus_str = secondHandsArr.join(' ')
        $.post('../../php/focuson2.php', {
            username: '111',
            Focus_secondHands: focus_str
        }, function(data, status) {
            // console.log(data, status);
        })
        gainArr = arr.filter(function(item) {
            return secondHandsArr.some(function(el) {
                return el == item.id
            })
        })
        getDate(gainArr, oSecondhands, Attention1)
    }
})

// 租房事件委托
oLease.addEventListener('click', function(ev) {
    // 删除
    if (ev.target.className === 'unfavorite') {
        // 取id
        console.log(ev.target.className);
        let id = ev.target.parentNode.getAttribute('goodsId')


        leaseHouseArr.splice($.inArray(id, leaseHouseArr), 1);
        focus_str = leaseHouseArr.join(' ')
        $.post('../../php/focuson3.php', {
            username: '111',
            Focus_lease: focus_str
        }, function(data, status) {
            console.log(data, status);
        })

        gainArr2 = arr.filter(function(item) {
            return leaseHouseArr.some(function(el) {
                return el == item.id
            })
        })
        getDate(gainArr2, oLease, Attention2)
    }
})

// 新房事件委托
oNew.addEventListener('click', function(ev) {
    // 删除
    if (ev.target.className === 'unfavorite') {
        // 取id
        let id = ev.target.parentNode.getAttribute('goodsId')



        newHouseArr.splice($.inArray(id, newHouseArr), 1);
        focus_str = newHouseArr.join(' ')
        $.post('../../php/focuson.php', {
            username: '111',
            Focusonhousing: focus_str
        }, function(data, status) {
            console.log(data, status);
        })
        gainArr3 = arr.filter(function(item) {
            return newHouseArr.some(function(el) {
                return el == item.id
            })
        })
        getDate(gainArr3, oNew, Attention3)
    }
})